<template>
  <div class="listTemplate">
    <header class="t-header">
        <mu-button flat small class="t-close" v-close><i class="iconfont iconangle-left"></i></mu-button>
        <span class="t-title">列表标题</span>
        
        <mu-button flat small class="t-close t-right-icon" @click="open = true"><i class="iconfont iconshaixuan4"></i> </mu-button>
    </header>
    <section class="t-body">
        <mu-container ref="container" class="demo-loadmore-content">
            <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load">
            <mu-list>
                <template v-for="i in num">
                    <mu-list-item>
                        <mu-list-item-title>{{text}} Item {{i}}</mu-list-item-title>
                    </mu-list-item>
                    <mu-divider />
                </template>
            </mu-list>
            </mu-load-more>
        </mu-container>
    </section>
    <mu-bottom-sheet :open.sync="open">
        <mu-list @item-click="closeBottomSheet">
            <mu-sub-header>Select One</mu-sub-header>
            <mu-list-item button>
                <mu-list-item-action>
                <mu-icon value="grade" color="orange"></mu-icon>
                </mu-list-item-action>
                <mu-list-item-title>Star</mu-list-item-title>
            </mu-list-item>
            <mu-list-item button>
                <mu-list-item-action>
                <mu-icon value="inbox" color="blue"></mu-icon>
                </mu-list-item-action>
                <mu-list-item-title>Inbox</mu-list-item-title>
            </mu-list-item>
            <mu-list-item button>
                <mu-list-item-action>
                <mu-icon value="chat" color="green"></mu-icon>
                </mu-list-item-action>
                <mu-list-item-title>Chat</mu-list-item-title>
            </mu-list-item>
            <mu-list-item button>
                <mu-list-item-action>
                <mu-icon value="email" color="cyan"></mu-icon>
                </mu-list-item-action>
                <mu-list-item-title>Email</mu-list-item-title>
            </mu-list-item>
        </mu-list>
    </mu-bottom-sheet>
  </div>
</template>

<script>
export default {
  name: 'mainPage',
  data () {
    return {
      num: 20,
      refreshing: false,
      loading: false,
      text: 'List',
      open:false,
    }
  },
  mounted(){
    
  },
  created(){
    
    console.log(this.$A.GUP())
  },
  methods:{
    closeBottomSheet (isnot) {
      this.open = isnot;
    },
    refresh () {
      this.refreshing = true;
      this.$refs.container.scrollTop = 0;
      setTimeout(() => {
        this.refreshing = false;
        this.text = this.text === 'List' ? 'Menu' : 'List';
        this.num = 20;
      }, 2000)
    },
    load () {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.num += 20;
      }, 2000)
    }
  },
}
</script>
<style lang="scss" scoped>
  .listTemplate{
      height:100%;
      width:100%;
      position:relative;
      overflow:hidden;
      .t-header{
          height:0.45rem;
          width:100%;
          color:#3D3D3D;
          box-sizing:border-box;
          padding:5px 8px;
          position:relative;
          box-shadow: 0 2px 4px -1px rgba(0,0,0,.07), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 7px 0 rgba(0,0,0,.12);
          display:flex;
          justify-content:space-between;
          align-items:center;
          .t-close{
            min-width: 28px;
            border-radius: 50%;
          }
          .t-title{
              position:absolute;
              top:50%;
              left:50%;
              transform:translate(-50%,-50%);
              font-size: 0.19rem; 
              font-weight: 500;
          }
          .t-right-icon{
              font-size:0.2rem;
          }
      }
      .t-body{
          height:calc(100% - 0.45rem);
          width:100%;
          overflow:auto;
          background-color:#F8F8F8;
      }
      .t-body + .t-footer{
          height:0.45rem;
          width:100%;
      }
      .t-footer + .t-body{
          height:calc(100% - 0.9rem);
      }
  }
</style>
<style lang="scss" >
.t-close{
    .mu-button-wrapper{
        padding:0 !important;
    }
}
</style>